<template>
  <div>
    hellow world
    <div class="less"></div>
    <!-- 测试svg -->
    <svg-icon name="test-vue" />
    <!-- 测试pinia -->
    <button @click="number += 1">{{ number }}</button>
    <!-- 测试vant ui -->
    <div>
      <van-button type="primary">vant button</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { Toast } from "vant";
  import { computed } from "vue";
  import { useTestStore } from "@/store";
  import { login } from "@/api/test";

  const store = useTestStore();
  const number = computed<number>({
    get() {
      return store.number;
    },
    set(value) {
      store.setNumber(value);
    },
  });

  Toast("使用vant");

  login({});
</script>

<style lang="less" scoped>
  // 测试less
  .less {
    width: 100px;
    height: 100px;
    background-color: @page-bgc;
  }
</style>
